<template>
  <div v-for="groupItem in groupList" :key="groupItem.groupType">
    <a-dropdown>
      <a class="ant-dropdown-link" @click.prevent>
        {{ groupItem.groupTitle }}
        <DownOutlined />
      </a>
      <template #overlay>
        <a-flex gap="middle">
          <div
            v-for="item in groupItem.list"
            :key="item.type"
            class="item"
            @click="addComponent(item)"
          >
            {{ item.title }}
          </div>
        </a-flex>
      </template>
    </a-dropdown>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { DownOutlined } from "@ant-design/icons-vue";
import { snowFlakeId } from "@/utils";
import { getAllGroupList, getDefaultConfig } from "@/form/common/component-market";
import { useFormStore } from "@/form/design-mode/store/formStore";
const formStore = useFormStore();
const groupList = ref(getAllGroupList());
const addComponent = (item) => {
  const defaultConfig = getDefaultConfig(item.type);
  const addItem = {
    id: snowFlakeId(),
    type:item.type,
    config: defaultConfig,
  };
  formStore.addComponent(addItem);
};
</script>
<style scoped>
.item {
  padding: 8px 16px;
  cursor: pointer;
}
</style>
